import React, { useEffect, useState } from 'react';
import { Row, Col, Table, Tooltip, Button, Input, Space, Select } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Get } from '../../server/http';
import { Url } from '../../server/http';
import { render } from 'less';

const { Search } = Input;
const { Option } = Select;

const Feedback = () => {
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);         // 原始数据
    const [searchFields, setSearchFields] = useState([]);     // 搜索选项
    const [searchTerm, setSearchTerm] = useState("");         // 搜索关键词
    const [page, setPage] = useState(1);
    const [perPage, setPerPage] = useState(10);
    const [total, setTotal] = useState(0);


    // 初始化数据
    useEffect(() => {
        setLoading(true);
        getMember();
    }, []);

    const getMember = (page = 1, perPage = 20, cert = false) => {
        let params = {
            page,
            per_page: perPage
        }
        if (cert) {
            params.search_fields = searchFields;
            params.search_term = cert
        }

        Get(Url.FEEDBACK_LIST, params).then(
            data => {
                setLoading(false);
                setDataSource(data.data.data)
                setTotal(data.data.total)
            }
        )
    }

    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: '10%',
        },
        {
            title: '部门',
            dataIndex: 'department',
            key: 'department',
            width: '10%',
        },
        {
            title: '反馈意见',
            dataIndex: 'content',
            key: 'content',
            width: '70%',
            ellipsis: true,
            render: (text) => <Tooltip title={text}>{text}</Tooltip>,
        },
    ];

    // 分页配置
    const pagination = {
        current: page,
        total: total,
        perPage: perPage,
        onChange: (newPage, newPerPage) => {
            setPage(newPage);
            setPerPage(newPerPage)
            getMember(newPage, newPerPage)
        },
    };

    // 生成多选下拉菜单的选项
    const selectOptions = columns.map((column) => (
        <Option key={column.dataIndex} value={column.dataIndex}>
            {column.title}
        </Option>
    ));

    // 搜索事件
    const handleSearch = (value) => {
        setSearchTerm(value);
        setPage(1); // 搜索后重置到第一页
        getMember(1, perPage, value)
    };

    return (
        <div >
            <Space style={{ margin: '20px 0' }}>
                <Select
                    style={{ width: 200 }}
                    placeholder="请选择搜索字段"
                    onChange={(value) => setSearchFields(value)}
                >
                    {selectOptions}
                </Select>
                <Search
                    value={searchTerm}
                    placeholder="请输入信息搜索"
                    onChange={(e) => { setSearchTerm(e.target.value) }}
                    onSearch={handleSearch}
                    enterButton={<Button icon={<SearchOutlined />}>搜索</Button>}
                    // 添加清除按钮
                    allowClear
                />
                <Button onClick={() => { setSearchTerm(''); getMember(1); }}>重置</Button>
            </Space>
            <Table
                scroll={
                    {
                        scrollToFirstRowOnChange: true,
                        x: false,
                        y: 550
                    }
                }
                key={'id'}
                loading={loading}
                columns={columns}
                dataSource={dataSource}
                pagination={pagination}
                bordered
            />
        </div>
    );
};

export default Feedback;